/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: 汪滔
 * @LastEditTime: 2020-08-19 17:05:18
 * @Description: file content
 */

import React, { Component } from 'react';
import { StyleSheet, View, Text, ScrollView } from 'react-native';
import {
  mainBgColorWhite,
  fontColorBlack,
  screenWidth,
  px2dp,
  mainBgColorLightGray,
} from '@/styles';
import api from '@/api';
import AutoHeightWebView from 'react-native-autoheight-webview';
import EmptyPage from '../../../../components/EmptyPage';

const styleHtml = ` 


<head>
  <meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>
<style>
  body {font-size: 14px;word-break: break-all;overflow:hidden;}
  * {max-width: 100%;}
  html{margin-top:10px}
  img { padding: 0; margin: 0; border: 0;}
  li,ul,span{margin-left: 10px; margin-right:10px;}
  p{margin-left: 10px; margin-right:30px;}
</style>
`;

export default class MemberBrand extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: '',
      isLoading: true
    };
  }

  componentDidMount() {
    const allianceId = this.props.allianceMemId;
    this.init(allianceId);
  }

  render() {
    const { content, isLoading } = this.state;
    return (
      <ScrollView
        style={{ backgroundColor: mainBgColorLightGray }}
        showsVerticalScrollIndicator={false}
      >
        {
          !isLoading ?
            content ?
              <View style={styles.container}>
                <View style={styles.gray} />
                <Text style={styles.title}>商家介绍</Text>
                <View
                  style={{
                    flex: 1,
                    paddingHorizontal: px2dp(32),
                  }}
                >
                  <AutoHeightWebView
                    style={[styles.xmWebviewStyle]}
                    enableBaseUrl
                    scalesPageToFit={false}
                    source={{
                      html: styleHtml + content,
                    }}
                  />
                </View>
              </View> : <EmptyPage noText='暂无介绍' />
            : null
        }
      </ScrollView>
    );
  }

  // 初始化
  init = (allianceId) => {
    api.home.getMemberContent({ allianceId }).then((res) => {
      this.setState({ isLoading: false });
      if (res.success) {
        this.setState({
          content: res.data.content,
        });
      } else {
        msg.emit('app:tip', { text: res.msg });
      }
    });
  };
}
const styles = StyleSheet.create({
  gray: {
    backgroundColor: mainBgColorLightGray,
    width: screenWidth,
    height: px2dp(24),
  },
  container: {
    flex: 1,
    backgroundColor: mainBgColorWhite,
  },
  title: {
    color: fontColorBlack,
    fontSize: px2dp(32),
    fontWeight: 'bold',
    paddingVertical: px2dp(24),
    paddingHorizontal: px2dp(32),
  },
  xmWebviewStyle: {
    width: '100%',
  },
});
